﻿<DemoContainer>
    @if (chart != null)
    {
        @foreach (var series in chart.Series)
        {
            <Badge class="me-2" BackgroundColor=TablerColor.Primary OnClick="@(() => ToggleChartSeries(series))">@series.Name @series.Items.Count()</Badge>
        }

        <span>Click badge to toggle series</span>

        <div class="mt-2">
            <Button Size=ButtonSize.Small BackgroundColor=TablerColor.Green OnClick=ShowAll>Show All</Button>
            <Button Size=ButtonSize.Small BackgroundColor=TablerColor.Danger OnClick=HideAll>Hide All</Button>
        </div>
    }

    <ApexChart @ref=chart TItem="Order"
               Title="Order Net Value"
               OnRendered=ChartRendered>

        <ApexPointSeries TItem="Order"
                         Items="orders"
                         Name="Gross Value"
                         SeriesType="SeriesType.Bar"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
                         OrderByDescending="e=>e.Y" />

        <ApexPointSeries TItem="Order"
                         Items="orders"
                         Name="Net Value"
                         SeriesType="SeriesType.Bar"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
                         OrderByDescending="e=>e.Y" />


    </ApexChart>
</DemoContainer>

@code {
    private ApexChart<Order> chart;
    private List<Order> orders = SampleData.GetOrders();

    private async Task ShowAll()
    {
        foreach (var series in chart.Series)
        {
            await series.Show();
        }
    }

    private async Task HideAll()
    {
        foreach (var series in chart.Series)
        {
            await series.Hide();
        }
    }

    private void ChartRendered()
    {
        StateHasChanged();
    }

    private async Task ToggleChartSeries(IApexSeries<Order> series)
    {
        await series.Toggle();
    }
}